<!-- 设备计划高级搜索 -->
<template>
    <el-dialog
        title="高级搜索"
        :visible.sync="dialogVisibleSearch"
        width="650px"
        custom-class="searchDialog"
        @close = "close"
    >
        <div>
            <el-form ref="form" :model="formData" label-width="100px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="机构：">
                            <el-input
                                v-model="input1"
                                placeholder="请选择机构"
                            >
                            <i slot="suffix" class="el-input__icon el-icon-document-copy"></i>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="计划日期：">
                            <el-date-picker type="date" placeholder="选择开始日期" value-format="yyyy-MM-dd" v-model="formData.search.startDate"  style="width: 47%;"></el-date-picker>
                            <div class="separ el-icon-minus"></div>
                            <el-date-picker type="date" placeholder="选择结束日期" value-format="yyyy-MM-dd" v-model="formData.search.endDate"  style="width: 47%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
  <el-row>
                    <el-col :span="12">
                        <el-form-item label="采购方式：">
                                <checkAll :chackdData.sync="purchaseTypeList" @checkdData="purchaseType" ref="purchaseType"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="状态：">
                            <checkAll :chackdData.sync="stateForm" @checkdData="checkedState" ref="checkedState"/>

                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" class="btn-blue" @click="confirm"
                >确定</el-button
            >
            <el-button size="small" class="btn-greenYellow"
                @click="reset"
                >重置</el-button
            >
            <el-button size="small"  @click="close">取 消</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { mapState } from 'vuex'
import checkAll from '@/components/common/checkAll'
export default {
    components: {
        checkAll
    },
    props: {
        dialogVisibleSearch: {
            default: Boolean,
            require: true
        },
    },
    data () {
        return {
            checkAll: false,
            isIndeterminate: true,
            purchaseTypeList: [
                {
                    value: '0',
                    label: '普通采购'
                },
                {
                    value: '1',
                    label: '集中采购'
                },
            ],
            formData: {
                'keyWord': '',
                'limit': 10,
                'page': 1,
                'search': {
                    'endDate': '',
                    'orgId': '',
                    'purchaseType': [],
                    'source': [],
                    'startDate': '',
                    'state': []
                }
            }
        }
    },
    computed: {
        ...mapState({
            stateForm: state => state.equip.equipData.state//状态
        }),
        statusLable () {
            return param=> {
                const state =  this.$store.state.equip.equipData.state
                const obj = state.find(x=>x.value === param)
                return obj.label
            }
        },
    },
    mounted () {
    },
    methods: {
        checkedState (e) {
            this.formData.search.state = e
        },
        purchaseType (e) {
            this.formData.search.purchaseType = e
        },
        confirm () {
            console.log(this.formData.search.state)
            this.$emit('submit', this.formData)
            this.close ()
        },
        close () {
            this.$emit('heightSharchClose')
            this.reset()
        },
        reset () {
            Object.assign(this.$data.formData, this.$options.data().formData) //清空表单的数据
            this.$refs.purchaseType.checkdData = [] //清空子组件的已选中的数据
            this.$refs.purchaseType.checkAll = false
            this.$refs.checkedState.checkdData = [] //清空子组件的已选中的数据
            this.$refs.checkedState.checkAll = false
        }
    },

}

</script>

<style lang='scss' scoped>
    .separ{
        display: inline-block;
        font-weight: bold;
        width: 4%;
        margin: 0 1% 0 1%;
        text-align: center;
    }
    .dialog-footer {
        text-align: right;
    }
</style>
